<template>
  <div id="app">
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <table>
      <tr>
        <h3>苹果10 / 斤, 折扣 (8) 折></h3>
      </tr>
      <tr>
        <td>
          <span>请输入你要购买的斤数</span>
          <input type="number" v-model.number="jiage" />
        </td>
      </tr>
      <tr>
        <td><button @click="btn">结账买单!</button></td>
      </tr>
      <tr>
        <td>
          账单:总价:{{ zongjia }}元 折后价:{{ zhehou }}元 省了:{{ sheng }}元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jiage: 0,
      zongjia: 0,
      zhehou: 0,
      sheng: 0,
    };
  },
  methods: {
    btn() {
      this.zongjia = this.jiage * 10;
      this.zhehou = this.zongjia * 0.8;
      this.sheng = this.zongjia - this.zhehou;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
table {
  margin: 0 auto;
}
</style>